<template>
  <div class="tools_box">
    <div class="top_tabs">
      <div class="label_list">
        <my_scroll>
          <div style="display: flex">
            <div
              class="label"
              v-for="item in new_tabs"
              :key="item.index"
              :class="{ is_active: item.index === tab_index }"
              @click="tabs_click(item)"
            >
              <toggle_popup>
                <div class="title">
                  <span>{{ item.title }}</span
                  ><span
                    @click.stop="fixed_click(item)"
                    class="iconfont"
                    :class="{
                      'icon-guding-04': item.is_fixed,
                      'icon-chacha-copy': !item.is_fixed,
                    }"
                  ></span>
                </div>
                <template v-slot:content>
                  <div class="popup_content">
                    <div class="row" @click="switch_fixed_click(item)">
                      {{ item.is_fixed ? "取消固定" : "固定" }}
                    </div>
                    <div class="row" @click="open_in_new_window(item)">新窗口打开</div>
                  </div>
                </template>
              </toggle_popup>
            </div>
          </div>
        </my_scroll>
      </div>

      <div class="add_label">
        <el-select
          v-model="tab_select"
          placeholder="请选择标题..."
          style="width: 100%; height: 100%"
          @change="selsect_change"
        >
          <el-option
            v-for="item in add_tabs"
            :key="item.index"
            :label="item.title"
            :value="item.index"
            :disabled="tabs.includes(item.index)"
          />
        </el-select>
      </div>
    </div>
    <div class="buttom_content">
      <router-view />
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount, computed } from "vue";
import toggle_popup from "@/components/toggle_popup/index.vue";
import my_scroll from "@/components/my_scroll/index.vue";
import { my_message } from "@/utils/my_message/index.js";
import { useRouter } from "vue-router";
import { useIndexStore } from "@/store/model/index";
import { Events } from "@/utils/events_bus/index.js";

const store = useIndexStore();
const router = useRouter();
const msg = my_message();

const tabs = ref(["0"]);
const tab_index = ref("0");
const tab_select = ref("");
const add_tabs = ref([]);

onBeforeMount(() => {
  add_tabs.value = store.config.tabs;
  tabs.value = store.config.tab_select_list;
  update_tabs_is_active();
});

const new_tabs = computed(() => {
  let list = [];
  tabs.value.forEach((element) => {
    add_tabs.value.forEach((item) => {
      if (element === item.index) {
        list.push(item);
      }
    });
  });
  return list;
});

const update_tabs_is_active = () => {
  add_tabs.value.forEach((item) => {
    if (item.index === tab_index.value) {
      router.push(item.path);
    }
  });
};

const tabs_click = (item) => {
  tab_index.value = item.index;
  update_tabs_is_active();
};

const selsect_change = (val) => {
  tabs.value.push(val);
  tab_select.value = "";
};

const delete_tab = (index) => {
  tabs.value.splice(index, 1);
};

const fixed_click = (item) => {
  if (item.is_fixed) {
    item.is_fixed = false;
  } else {
    if (tabs.value.length === 1) {
      msg.msg_error("最少保留一个标签!");
      return;
    } else {
      const index = tabs.value.findIndex((i) => {
        // 返回 true 时，停止遍历并返回当前引
        return i === item.index;
      });
      // 判断当前是否是删除的自己
      if (item.index === tab_index.value) {
        if (index === 0) {
          tab_index.value = tabs.value[1];
        } else {
          if (tab_index.value !== tabs.value[index - 1]) {
          }
          tab_index.value = tabs.value[index - 1];
        }
      }
      delete_tab(index);
      update_tabs_is_active();
    }
  }
};

const switch_fixed_click = (item) => {
  item.is_fixed = !item.is_fixed;
};

const open_in_new_window = (item) => {
  Events.IPC.Renderer.send("open_new", {
			path: item.new_path,
			name: `open_${new Date().getTime()}`,
			title: item.title,
			is_external_page: false,
			options: {
				width: 1200,
				height: 800,
			},
		});
}
</script>
<style lang="less" scoped>
.tools_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  --tab-height: 40px;

  .top_tabs {
    width: 100%;
    height: var(--tab-height);
    box-sizing: border-box;
    border-bottom: var(--split-line);
    display: flex;

    .label_list {
      height: var(--tab-height);
      display: flex;
      flex-grow: 1;

      .label {
        height: calc(var(--tab-height) - 1px);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-right: var(--split-line);
        flex: none;
        background: var(--top-nav-bg);
        cursor: pointer;

        .title {
          padding: 0 30px;
          display: flex;
          align-items: center;

          .iconfont {
            width: 20px;
            height: 20px;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
            border-radius: 4px;
            margin-left: 10px;

            &:hover {
              background-color: var(--min-max-hover-color);
            }
          }
        }
      }

      .is_active {
        background: var(--top-nav-active-bg);
      }
    }

    .add_label {
      height: 100%;
      width: 150px;
      box-sizing: border-box;
      flex: none;

      :deep(.el-select__wrapper) {
        height: 100%;
        border-radius: 0 !important;
        box-shadow: none;

        &.is_hovering {
          box-shadow: none;
        }
      }
    }
  }

  .buttom_content {
    width: 100%;
    height: calc(100% - var(--tab-height));
    // overflow-y: auto;
  }
}
</style>
